<template>
    <div class="add_menu">
        <el-form :model="form" label-width="120px">
            <el-form-item label="菜单名称" prop="title" :rules="[
                { required: true, message: '菜单名称不能为空' },
            ]">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="上级菜单">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="前端名称" :disabled="params.parentId != 0" prop="name" :rules="[
                { required: true, message: '前端名称不能为空' },
            ]">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="前端图标">
                <el-input v-model="form.icon" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="form.hidden">
                    <el-radio :label="0" size="large">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sort" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="createMenuSubmitFn">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ApiCreateMenu, ApiGetMenuList } from "@/http/api"
// @ts-ignore
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
// do not use same name with ref
// "上级菜单"默认值value
const value = ref('')
// form 初始值 initForm
const initForm = {
    hidden: 0,
    id: 0,
    parentId: 0,
    title: '',
    name: '',
    icon: '',
    sort: '',
    level: 0,
}
// form拥有响应式数据
const form = reactive<IAddMenuModel>({
    ...initForm
})
// 跳转页面
const route = useRoute()
if (route.query.id) {
    // 存menuList
    let menuList = localStorage.getItem('menuList')
    if (menuList) {
        Object.assign(form, JSON.parse(menuList))
    }
}
// 添加表单 数组
const options = ref<IAddMenuModel[]>([
    {
        hidden: 1,
        id: 0,
        parentId: 0,
        title: '无上级菜单',
        name: '',
        icon: '',
        sort: '',
        level: 0,
    }
])
// 提交按钮
const router = useRouter();
let createMenuSubmitFn = () => {
    ApiCreateMenu(form).then(res => {
        if (res.code === 200) {
            // 弹框提示用户
            ElMessage({
                type: 'success',
                message: '修改用户状态成功'
            })
            // 返回一级
            router.go(-1);
            requestMenuList();
        }
    })

}
const params = reactive<IGetMenuListParams>({
    pageNum: 1,
    pageSize: 5,
    parentId: 0
})
// 菜单列表 刷新
const requestMenuList = () => {
    ApiGetMenuList(params).then(res => {
        if (res.code === 200) {
            options.value.push(...res.data.list)
        }
    })
}
requestMenuList();

</script>

<style scoped lang="less">
.add_menu {
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
}
</style>